import React, { useEffect, useState } from 'react'
import { PullRefresh, Toast } from 'react-vant'
import './shou.scss'
import axios from '../../http/axios'
import { InfiniteScroll, List, DotLoading } from 'antd-mobile'

export default function Gz() {
  let [id, setid] = useState("")
  let [list, setlist] = useState([])
  let getall = async () => {
    let res = await axios.get('/look')

    setlist(res.data.vllist)
  }

  const [start, setstart] = useState(0)
  const render = () => {
    let num = Math.floor(Math.random() * 100)

    setstart(num)
  }
  const onRefresh = showToast => {
    render()
    return new Promise(resolve => {
      setTimeout(() => {
        if (showToast) {
          Toast.info('刷新成功')
        }
        resolve(true)
      }, 1000)
    })
  }
  useEffect(() => {
    render()
    getall()
  }, [])
  let bian = (el) => {
    setid(el)

  }

  const InfiniteScrollContent = ({ hasMore }) => {
    return (
      <>
        {hasMore ? (
          <>
            <span>Loading</span>
            <DotLoading />
          </>
        ) : (
          <span>Loading
             <DotLoading />
          </span>
         
        )}
      </>
    )
  }
  const [hasMore, setHasMore] = useState(true)
  let [len,setlen] = useState(3)
  let loadMore=()=>{
    setTimeout(()=>{
      setlen(len+3)
      setHasMore(len<list.length)
    },1000)
  }
  // 触底加载
  

  return (
    <div className='demo-pull-refresh' >
      {/* <PullRefresh successText="刷新成功" onRefresh={onRefresh} style={{ overflow: 'auto' }}>
      </PullRefresh> */}
        <div>
          <div className='follow'>
            <div className='wei-pic'>
              <img src="https://www.pabzibo.live:3001/upload/weiguan.png" alt="" className='wei-pp' />
            </div>
            <div className='wei-zi'>
              你还没关注任何人哦～
            </div>
          </div>
          <div className='cai'>
            <div>
              为你推荐
            </div>
            <div className='more'>
              更多
            </div>
          </div>
          <div className="weini">
            {
              list.map(el => {
                return (
                  <div className="hua" key={el._id} >
                    <div className='cha' onClick={() => { bian(el._id) }}>
                      <img src="https://www.pabzibo.live:3001/upload/cha.png" alt="" />
                    </div>
                    <img src={el.uid.avatar} alt="" className='aa' />
                    <div className='tyh'>
                      {el.uid.name}
                    </div>
                    <div className='ty-biao'>
                    优质娱乐创作者，坚持更新文章
                    </div>
                    <div className='gan'>
                      +关注
                    </div>

                  </div>

                )
              })
            }
          </div>
        </div>
        <div>
          <div className='cai'>
            <div>
              猜你喜欢
            </div>
            <div className='more'>
              更多
            </div>
          </div>
          {list.slice(0, len).map((item, index) => {
            return <div key={index} className='ge'>
              <div className='tu'>
              <video src={item.video} alt="" style={{width:'100%',height:'100%'}} controls/>
              </div>
              <div className='zi'>
                {item.title}
              </div>
              <div className='bai'>
                <div className='tou'>
                  <img src={item.uid.avatar} alt="" className='tt' />
                </div>
                <div className='yh'>
                {item.uid.name}
                </div>
                <div className='wei'>
                  <img src='https://www.pabzibo.live:3001/upload/wei.png' />
                </div>
                <div className='zan'>
                  {/* 点赞数 */}
                  111
                </div>
                <div className='yb'>
                  <img src="https://www.pabzibo.live:3001/upload/3点.png" className='ydd' />
                </div>
              </div>
            </div>
          })}
        </div>
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
        <InfiniteScrollContent hasMore={hasMore} />
      </InfiniteScroll>
    </div>
  )
}
